<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h2>个人资料</h2>
        </div>
      </template>

      <!-- 头像上传 -->
      <div class="avatar-section">
        <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-change="handleAvatarChange"
            accept="image/jpeg,image/png"
        >
          <img v-if="user.avatar" :src="user.avatar" class="avatar" />
          <el-icon v-else class="avatar-icon"><Plus /></el-icon>
        </el-upload>
        <p class="avatar-tip">点击更换头像 (支持JPG/PNG，小于2MB)</p>
      </div>

      <!-- 个人信息表单 -->
      <el-form :model="form" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" disabled />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">保存修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 从localStorage加载用户数据
const loadUserData = () => {
  const savedUser = localStorage.getItem('user')
  if (savedUser) {
    return JSON.parse(savedUser)
  }
  // 默认用户数据
  return {
    avatar: '',
    username: '当前用户',
    phone: '',
    email: ''
  }
}

// 保存用户数据到localStorage
const saveUserData = (data) => {
  localStorage.setItem('user', JSON.stringify(data))
  // 触发storage事件，通知其他页面更新
  window.dispatchEvent(new Event('storage'))
}

const user = ref(loadUserData())
const form = ref({
  phone: user.value.phone,
  email: user.value.email
})

// 头像上传校验
const beforeAvatarUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJpgOrPng) {
    ElMessage.error('只支持JPG/PNG格式')
    return false
  }

  if (!isLt2M) {
    ElMessage.error('图片大小需小于2MB')
    return false
  }

  return true
}

// 处理头像选择
const handleAvatarChange = (uploadFile) => {
  const reader = new FileReader()

  reader.onload = (e) => {
    user.value.avatar = e.target.result
    saveUserData(user.value)
    ElMessage.success('头像更新成功')
  }

  reader.readAsDataURL(uploadFile.raw)
}

// 提交表单
const handleSubmit = () => {
  // 更新用户数据
  user.value.phone = form.value.phone
  user.value.email = form.value.email

  // 保存到localStorage
  saveUserData(user.value)
  ElMessage.success('修改已保存')
}

onMounted(() => {
  // 初始化表单数据
  form.value = {
    phone: user.value.phone,
    email: user.value.email
  }
})
</script>

<style scoped>
.profile-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.avatar-section {
  text-align: center;
  margin-bottom: 30px;
}

.avatar-uploader {
  display: inline-block;
  cursor: pointer;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #eee;
}

.avatar-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
}

.avatar-tip {
  color: #666;
  margin-top: 10px;
  font-size: 12px;
}
</style>